<template>
  <div class="data-v-sg">
    <svg width="6" height="50" class="svg-class">
      <polygon points="0,15 10,5 10,40 0,30" :style="svgSty"></polygon>
    </svg>
    <div class="box" :style="boxSty">
      <img src="./img/box.png" alt="icon" width="32" height="35" />
      <div class="wrap">
        <div class="name">{{ name }}</div>
        <div class="value">{{ formattedValue }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { modifyOpacity } from "../color";
import { formatNum } from "../utils";
export default {
  name: "data-v-summary-gradient",
  props: {
    value: {
      type: [String, Number],
      default: 123456789
    },
    name: {
      type: String,
      default: "默认数据名称"
    },

    color: {
      type: String,
      default: "#fff"
    },

    icon: {
      type: String,
      default: ""
    }
  },
  computed: {
    formattedValue() {
      return formatNum(this.value);
    },
    svgSty() {
      return {
        fill: this.color
      };
    },

    boxSty() {
      let startColor = modifyOpacity(this.color, 0.8);
      let endColor = modifyOpacity(this.color, 0.1);
      return {
        background: `linear-gradient(
              to right,
              ${startColor},
              ${endColor}
            )`
      };
    }
  }
};
</script>

<style lang="less">
.data-v-sg {
  display: flex;
  width: 180px;
  height: 60px;
  background: url(./img/bg.png) no-repeat left center;
  padding: 6px;
  margin: 5px;
  position: relative;
  .svg-class {
    position: absolute;
    left: 0;
  }
  .box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: linear-gradient(
    //   to right,
    //   rgba(0, 177, 177, 0.8),
    //   rgba(0, 177, 177, 0.1)
    // );
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  .name {
    opacity: 0.8;
    font-size: 14px;
  }
  .value {
    font-weight: 400;
    font-size: 16px;
  }
  .wrap {
    margin-left: 15px;
  }
}
</style>
